<div class="pull-right">
    <div class="btn-group" dropdown>
        <button class="btn btn-link" dropdownToggle>
            <em class="fa fa-ellipsis-v fa-lg"></em>
        </button>
        <ul *dropdownMenu class="dropdown-menu dropdown-menu-right animated fadeInLeft" role="menu">
            <li>
                <a>
                    <em class="fa fa-fw fa-plus mr"></em>
                    <span>New contact</span>
                </a>
            </li>
            <li>
                <a>
                    <em class="fa fa-fw fa-mail-forward mr"></em>
                    <span>Import contact</span>
                </a>
            </li>
            <li>
                <a>
                    <em class="fa fa-fw fa-mail-reply mr"></em>
                    <span>Export contacts</span>
                </a>
            </li>
        </ul>
    </div>
</div>
<h3>Contacts</h3>
<div class="row">
    <div class="col-md-4">
        <div class="panel panel-default">
            <div class="panel-heading">
                <a class="pull-right text-muted" (click)="favContact1=!favContact1">
                    <em class="fa" [ngClass]="favContact1 ? 'fa-star text-warning' : 'fa-star-o'"></em>
                </a>
            </div>
            <div class="panel-body text-center">
                <img class="center-block img-responsive img-circle thumb64" src="assets/img/user/02.jpg" alt="Contact" />
                <h4>Audrey Hunt</h4>
                <p>Hello, I'm a just a dummy contact in your contact list and this is my presentation text. Have fun!</p>
            </div>
            <div class="panel-footer clearfix">
                <div class="pull-left"><a class="btn btn-xs btn-primary">Send message</a>
                </div>
                <div class="pull-right"><a class="btn btn-xs btn-default">View</a>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="panel panel-default">
            <div class="panel-heading">
                <a class="pull-right text-muted" (click)="favContact2=!favContact2">
                    <em class="fa" [ngClass]="favContact2 ? 'fa-star text-warning' : 'fa-star-o'"></em>
                </a>
            </div>
            <div class="panel-body text-center">
                <img class="center-block img-responsive img-circle thumb64" src="assets/img/user/03.jpg" alt="Contact" />
                <h4>Leonard Price</h4>
                <p>Hello, I'm a just a dummy contact in your contact list and this is my presentation text. Have fun!</p>
            </div>
            <div class="panel-footer clearfix">
                <div class="pull-left"><a class="btn btn-xs btn-primary">Send message</a>
                </div>
                <div class="pull-right"><a class="btn btn-xs btn-default">View</a>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="panel panel-default">
            <div class="panel-heading">
                <a class="pull-right text-muted" (click)="favContact3=!favContact3">
                    <em class="fa" [ngClass]="favContact3 ? 'fa-star text-warning' : 'fa-star-o'"></em>
                </a>
            </div>
            <div class="panel-body text-center">
                <img class="center-block img-responsive img-circle thumb64" src="assets/img/user/04.jpg" alt="Contact" />
                <h4>Jamie Stephens</h4>
                <p>Hello, I'm a just a dummy contact in your contact list and this is my presentation text. Have fun!</p>
            </div>
            <div class="panel-footer clearfix">
                <div class="pull-left"><a class="btn btn-xs btn-primary">Send message</a>
                </div>
                <div class="pull-right"><a class="btn btn-xs btn-default">View</a>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-4">
        <div class="panel panel-default">
            <div class="panel-heading">
                <a class="pull-right text-muted" (click)="favContact4=!favContact4">
                    <em class="fa" [ngClass]="favContact4 ? 'fa-star text-warning' : 'fa-star-o'"></em>
                </a>
            </div>
            <div class="panel-body text-center">
                <img class="center-block img-responsive img-circle thumb64" src="assets/img/user/05.jpg" alt="Contact" />
                <h4>Tara Nelson</h4>
                <p>Hello, I'm a just a dummy contact in your contact list and this is my presentation text. Have fun!</p>
            </div>
            <div class="panel-footer clearfix">
                <div class="pull-left"><a class="btn btn-xs btn-primary">Send message</a>
                </div>
                <div class="pull-right"><a class="btn btn-xs btn-default">View</a>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="panel panel-default">
            <div class="panel-heading">
                <a class="pull-right text-muted" (click)="favContact5=!favContact5">
                    <em class="fa" [ngClass]="favContact5 ? 'fa-star text-warning' : 'fa-star-o'"></em>
                </a>
            </div>
            <div class="panel-body text-center">
                <img class="center-block img-responsive img-circle thumb64" src="assets/img/user/06.jpg" alt="Contact" />
                <h4>Constance Cook</h4>
                <p>Hello, I'm a just a dummy contact in your contact list and this is my presentation text. Have fun!</p>
            </div>
            <div class="panel-footer clearfix">
                <div class="pull-left"><a class="btn btn-xs btn-primary mr-sm">Send message</a><a class="btn btn-xs btn-primary">Call</a>
                </div>
                <div class="pull-right"><a class="btn btn-xs btn-default">View</a>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="panel panel-default">
            <div class="panel-heading">
                <a class="pull-right text-muted" (click)="favContact6=!favContact6">
                    <em class="fa" [ngClass]="favContact6 ? 'fa-star text-warning' : 'fa-star-o'"></em>
                </a>
            </div>
            <div class="panel-body text-center">
                <img class="center-block img-responsive img-circle thumb64" src="assets/img/user/07.jpg" alt="Contact" />
                <h4>Laura Palmr</h4>
                <p>Hello, I'm a just a dummy contact in your contact list and this is my presentation text. Have fun!</p>
            </div>
            <div class="panel-footer clearfix">
                <div class="pull-left"><a class="btn btn-xs btn-primary">Send message</a>
                </div>
                <div class="pull-right"><a class="btn btn-xs btn-default">View</a>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-4">
        <div class="panel panel-default">
            <div class="panel-heading">
                <a class="pull-right text-muted" (click)="favContact7=!favContact7">
                    <em class="fa" [ngClass]="favContact7 ? 'fa-star text-warning' : 'fa-star-o'"></em>
                </a>
            </div>
            <div class="panel-body text-center">
                <img class="center-block img-responsive img-circle thumb64" src="assets/img/user/08.jpg" alt="Contact" />
                <h4>Audrey Hunt</h4>
                <p>Hello, I'm a just a dummy contact in your contact list and this is my presentation text. Have fun!</p>
            </div>
            <div class="panel-footer clearfix">
                <div class="pull-left"><a class="btn btn-xs btn-primary">Call</a>
                </div>
                <div class="pull-right"><a class="btn btn-xs btn-default">View</a>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="panel panel-default">
            <div class="panel-heading">
                <a class="pull-right text-muted" (click)="favContact8=!favContact8">
                    <em class="fa" [ngClass]="favContact8 ? 'fa-star text-warning' : 'fa-star-o'"></em>
                </a>
            </div>
            <div class="panel-body text-center">
                <img class="center-block img-responsive img-circle thumb64" src="assets/img/user/09.jpg" alt="Contact" />
                <h4>Leslie Mckinney</h4>
                <p>Hello, I'm a just a dummy contact in your contact list and this is my presentation text. Have fun!</p>
            </div>
            <div class="panel-footer clearfix">
                <div class="pull-left"><a class="btn btn-xs btn-primary">Send message</a>
                </div>
                <div class="pull-right"><a class="btn btn-xs btn-default">View</a>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="panel panel-default">
            <div class="panel-heading">
                <a class="pull-right text-muted" (click)="favContact9=!favContact9">
                    <em class="fa" [ngClass]="favContact9 ? 'fa-star text-warning' : 'fa-star-o'"></em>
                </a>
            </div>
            <div class="panel-body text-center">
                <img class="center-block img-responsive img-circle thumb64" src="assets/img/user/04.jpg" alt="Contact" />
                <h4>Brian Mills</h4>
                <p>Hello, I'm a just a dummy contact in your contact list and this is my presentation text. Have fun!</p>
            </div>
            <div class="panel-footer clearfix">
                <div class="pull-left"><a class="btn btn-xs btn-primary">Send message</a>
                </div>
                <div class="pull-right"><a class="btn btn-xs btn-default">View</a>
                </div>
            </div>
        </div>
    </div>
</div>
